Jak PWA, WebAssembly i ChromeOS pomagają internetowemu edytorowi wideo w zapewnianiu lepszej wydajności i bardziej angażujących wrażeń 12 mln użytkowników.
97%
Miesięczny wzrost liczby instalacji PWA
2,3x
Poprawa skuteczności
9%
większa lojalność użytkowników aplikacji internetowych;
Clipchamp to działający w przeglądarce edytor wideo, który umożliwia każdemu tworzenie wartościowych filmów. Ponad 12 milionów twórców na całym świecie używa Clipchamp do łatwego edytowania filmów. Oferujemy proste rozwiązania do tworzenia filmów, od intuicyjnych narzędzi takich jak przycinanie i przycinanie końcówek po praktyczne funkcje, takie jak rejestrator ekranu, a nawet twórca memów.
Kto korzysta z Clipchamp?
Nasi użytkownicy (czyli codzienni edytujący) są bardzo zróżnicowani. Aby zostać edytorem filmów w Clipchamp, nie trzeba mieć żadnego doświadczenia. Obecnie widzimy, że zespoły sprzedaży, szkolenia z obsługi klienta i marketingu produktów korzystają z naszej kamery internetowej i nagrywarki ekranu, aby szybko wyjaśniać zagadnienia za pomocą tekstów i GIF-ów, które zwiększają atrakcyjność tych treści. Zauważyliśmy też, że wiele małych firm edytuje i publikuje filmy w mediach społecznościowych w ruchu.
Z jakimi wyzwaniami się zmagają?
Zdajemy sobie sprawę, że edytowanie filmów może na początku wydawać się trudne. Zakładamy, że jest to trudne, prawdopodobnie z powodu wcześniejszych frustrujących doświadczeń z korzystaniem ze złożonego oprogramowania do edycji. Z kolei Clipchamp stawia na łatwość i prostotę, oferując pomoc w zakresie nakładek tekstowych, filmów i muzyki z biblioteki oraz szablonów.
Uważamy, że większość zwykłych edytorów nie chce tworzyć arcydzieł filmowych. Często rozmawiamy z użytkownikami i stale przypominamy im, że są bardzo zajęci i chcą jak najszybciej i najłatwiej przedstawić swoją historię światu.
Tworzenie aplikacji Clipchamp PWA
W Clipchamp chcemy, aby ludzie mogli opowiadać swoje historie za pomocą filmów. Aby zrealizować tę wizję, szybko zrozumieliśmy, że ważne jest umożliwienie użytkownikom korzystania z własnych materiałów podczas tworzenia projektu wideo.
Ta wiedza zmusiła zespół inżynierów Clipchamp do opracowania technologii, która mogłaby efektywnie przetwarzać pliki multimedialne o wielkości kilku gigabajtów w aplikacji internetowej. Z uwagi na ograniczenia przepustowości sieci szybko odrzuciliśmy tradycyjne rozwiązanie oparte na chmurze. Przesyłanie dużych plików multimedialnych z internetu w domu zawsze wiąże się z długim oczekiwaniem na rozpoczęcie edycji, co powoduje niewygodę użytkowników.
Z tego powodu przeszliśmy na rozwiązanie działające całkowicie w przeglądarce, w którym wszystkie „ciężkie zadania” związane z przetwarzaniem filmów są wykonywane lokalnie przy użyciu zasobów sprzętowych dostępnych na urządzeniu użytkownika. Strategicznie postawiliśmy na przeglądarkę Chrome i w dalszej kolejności na platformę ChromeOS, aby pomóc nam przezwyciężyć nieuniknione wyzwania związane z tworzeniem platformy do tworzenia filmów w przeglądarce.
Przetwarzanie filmów wymaga ogromnych zasobów, co wpływa zarówno na zasoby komputera, jak i zasoby pamięci. Pierwszą wersję Clipchamp zaczęliśmy tworzyć na podstawie (przenośnego) natywnego klienta Google (PNaCl). Chociaż ostatecznie wycofane, PNaCl było dla naszego zespołu świetnym potwierdzeniem, że aplikacje internetowe mogą być szybkie i mieć niską latencję, a jednocześnie działać na sprzęcie użytkownika.
Gdy później przełączyliśmy się na WebAssembly, ucieszył nas fakt, że Chrome wyprzedza inne przeglądarki w wdrażaniu funkcji dodawanych po osiągnięciu minimalnej wartości proponowanej, takich jak operacje zbiorcze na pamięci, wątki i ostatnio operacje wektorów o stałej szerokości. Nasz zespół inżynierów z niecierpliwością czekał na tę funkcję, która umożliwia optymalizację pakietu do przetwarzania filmów pod kątem wykorzystywania operacji SIMD, które są powszechne w przypadku współczesnych procesorów. Dzięki obsłudze instrukcji SIMD w ramach WebAssembly w Chrome udało nam się przyspieszyć niektóre szczególnie wymagające zadania, takie jak dekodowanie i kodowanie filmów w 4K.
Dzięki niewielkiemu doświadczeniu i mniej niż miesięcznej pracy jednego z naszych inżynierów udało nam się zwiększyć wydajność 2, 3 raza. Chociaż nadal są one dostępne tylko w ramach testów wersji próbnej Chrome Origin, udało nam się wdrożyć te ulepszenia SIMD dla większości użytkowników. Chociaż nasi użytkownicy korzystają z bardzo różnych konfiguracji sprzętowych, udało nam się potwierdzić wzrost wydajności w produkcji bez negatywnego wpływu na wskaźnik awarii.
Niedawno zintegrowaliśmy nowy interfejs WebCodecs API, który jest obecnie dostępny w ramach kolejnej próby korzystania z Chrome origin. Dzięki tej nowej funkcji będziemy mogli jeszcze bardziej poprawić wydajność dekodowania wideo na sprzęcie o niskich specyfikacjach, który jest używany w wielu popularnych Chromebookach.
Po utworzeniu strony internetowej o charakterze Progressive Web App ważne jest, aby zachęcić użytkowników do jej korzystania. Podobnie jak w przypadku wielu aplikacji internetowych, skupiliśmy się na łatwości dostępu, co obejmuje m.in. logowanie się w mediach społecznościowych, w tym w Google, szybkie przeniesienie użytkownika do miejsca, w którym może edytować film, a następnie łatwo go wyeksportować. Dodatkowo promowaliśmy prompty instalacji PWA na pasku narzędzi i w wyskakującym powiadomieniu w menu nawigacji.
Wyniki
Nasze progresywne aplikacje internetowe w Chrome świetnie się sprawdzają. Z wielką przyjemnością stwierdziliśmy, że użytkownicy PWA są o 9% bardziej skłonni do pozostania z nami niż standardowi użytkownicy komputerów. Od momentu wprowadzenia aplikacji na rynek 5 miesięcy temu liczba jej instalacji gwałtownie wzrosła i obecnie wynosi 97% miesięcznie. Jak już wspomnieliśmy, udoskonalenia SIMD dla WebAssembly zwiększyły wydajność 2, 3 raza.
Przyszła
Jesteśmy przyjemnie zaskoczeni zaangażowaniem i popularnością naszej aplikacji internetowej. Uważamy, że dzięki temu, że aplikacja PWA jest zainstalowana i łatwiej dostępna, udało się zatrzymać użytkowników Clipchamp. Zauważyliśmy też, że PWA działa lepiej w przypadku edytora, co sprawia, że jest on bardziej atrakcyjny i zachęca użytkowników do częstszego korzystania z aplikacji.
Patrzymy w przyszłość i jesteśmy podekscytowani możliwościami, jakie ChromeOS daje jeszcze większej liczbie użytkowników, którzy mogą dzięki niemu robić więcej bez zbędnego zamieszania. Szczególnie cieszymy się z możliwości integracji z lokalnym systemem operacyjnym podczas pracy z plikami. Uważamy, że przyspieszy to procesy pracy naszych zapracowanych redaktorów, a to jest jeden z naszych priorytetów.